<script setup lang="ts">
/**
 * @name DataSourceConfigs
 * @description 数据源配置
 */
import { type DataSourceConfig, useDataSourceConfigs } from '@/mixins/DataSourceConfigs/MixinDataSourceConfigs'
import StorageModeCell from '@/views/StatisticalIndicators/components/StorageModeCell.vue'
import type { Point } from '@/components/ReadonlyPointTree/ReadonlyPointTree'

const { form } = useKeepPageStore()
const [point, setPoint] = useState<Point | null>(null)
const {
  lists,
  loading,
  getConfigsByPointId,
  indicatorLists,
  getIndicatorsByPointId,
  save,
  saving,
} = useDataSourceConfigs()

function handleClickNode(o: Point) {
  setPoint(o)
}
function changeRowIndicator(row: Partial<DataSourceConfig>) {
  const t = unref(indicatorLists).find(i => i.indicatorNumber === row.indicatorNumber)
  row.unit = t?.unit || null
  row.indicatorName = t?.indicatorName || null
  row.storageMode = t?.storageMode
  // row.measuringPointNumber = t?.indicatorCode;
}
async function clickSave() {
  await save()
  const pointId = unref(point)?.id
  if (pointId)
    await getConfigsByPointId(pointId)
}

form(['/dictionary-management'])

watchEffect(async () => {
  const pointId = unref(point)?.id
  if (pointId) {
    await getIndicatorsByPointId(pointId)
    await getConfigsByPointId(pointId)
  }
})
</script>

<template>
  <div class="padding-sm flex container">
    <div class="points-container">
      <ReadonlyPointTree fire :need-full-name="1" @click-node="handleClickNode" />
    </div>
    <div class="margin-left-sm flex flex-1 flex-col overflow-auto">
      <div class="data-source-configs-title flex items-center">
        <strong>用能单元：</strong>
        <span class="text-truncate">{{ point?.pointFullName }}</span>
        <ElButton type="primary" class="ml-auto" :loading="saving" @click="clickSave">
          保存
        </ElButton>
      </div>
      <div class="alpha-block mt-4 flex-1 overflow-auto p-[10px]">
        <ElTable
          v-loading="loading" element-loading-custom-class="global-loading"
          :data="lists" height="100%"
        >
          <template #empty>
            <TableEmpty />
          </template>
          <ElTableColumn label="参数" prop="parameterValue" width="220px">
            <template #header>
              <div class="flex items-center justify-center">
                参数
                <ElLink
                  class="ml-3"
                  @click="$router.push({ name: 'DictionaryManagement', query: { dicCode: 'SHU_JU_YUAN_CAN_SHU' } })"
                >
                  [点击配置]
                </ElLink>
              </div>
            </template>
          </ElTableColumn>
          <ElTableColumn label="数据源" prop="indicatorNumber" width="300px">
            <template #default="{ row }">
              <ElSelect
                v-model="row.indicatorNumber"
                class="free" placeholder="选择数据源"
                clearable filterable
                @change="changeRowIndicator(row)"
              >
                <ElOption
                  v-for="(item) in indicatorLists"
                  :key="item.indicatorNumber"
                  :label="item.indicatorName + (item.indicatorNumber ? `（${item.indicatorNumber}）` : '')"
                  :value="item.indicatorNumber!"
                  :disabled="item.disabled"
                >
                  <span style="float: left">{{ item.indicatorName }}</span>
                  <span
                    style="
                    float: right;
                    color: var(--el-text-color-secondary);
                    font-size: 13px;
                  "
                  >
                    {{ item.indicatorNumber }}
                  </span>
                </ElOption>
              </ElSelect>
            </template>
          </ElTableColumn>
          <ElTableColumn label="单位" prop="unit">
            <template #default="{ row }">
              <span>{{ row.unit ?? '-' }}</span>
            </template>
          </ElTableColumn>
          <ElTableColumn label="存储周期" width="320px">
            <template #default="{ row }">
              <StorageModeCell v-if="row.storageMode" :mode="row.storageMode" />
              <span v-else>-</span>
            </template>
          </ElTableColumn>
        </ElTable>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.data-source-configs-title {
  user-select: text;
  font-size: var(--el-font-size-base);
  & > span {
    color: var(--el-text-color-regular);
  }
}
</style>
